<template>
  <div class="Calendar-container" @click.self="closeWindow">
    <Calendar
        v-on:choseDay="clickDay"
        v-on:changeMonth="changeDate"
        v-on:isToday="clickToday"
        :agoDayHide="startDay"
        ref="Calendar"
    ></Calendar>
  </div>
</template>

<script>
/**
 * calendar-item
 * @module '@/components/Calendar'
 * @desc 日历组件，点击可以返回一个日期
 * @date 2023年2月15日16:22:43
 * @param {Object} [setDateFun]  - 由父组件传入的回调函数，可以将‘子组件’的信息传回‘父组件’。
 * @example 调用示例
 *  <Calendar :setDateFun="getDate"></Calendar>
 **/

import Calendar from "vue-calendar-component";

export default {
  name: "calendar-item",
  components:{Calendar},
  props:['setDateFun'],
  data(){
    return{
      mode:0,
      startDay:'',
    }
  },
  mounted() {
    this.$bus.$on('openWindow', this.openWindow);
  },
  beforeDestroy() {
    this.$bus.$off('openWindow');
  },
  methods:{
    // 选择日期后关闭日历控件
    clickDay(data) {
      this.closeWindow();
      this.setDateFun(this.mode, data);
    },
    changeDate(data) {
      console.log("左右点击切换月份"+data); //左右点击切换月份
    },
    clickToday(data) {
      console.log("跳到了本月"+data); // 跳到了本月
    },
    // 激活日历控件
    openWindow(mode, startDate){
      const cm =  window.document.getElementsByClassName("Calendar-container")[0];
      this.startDay = startDate;
      this.mode = mode;
      cm.style.display = 'flex';
    },
    // 关闭日历控件
    closeWindow(){
      const cm =  window.document.getElementsByClassName("Calendar-container")[0];
      cm.style.display = 'none';
    }
  },
}
</script>

<style scoped lang="less">
.Calendar-container{
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.2);
  position: fixed;
  top: 0;
  left: 0;

  display: none;
  justify-content: center;
}
</style>